<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
</head>

<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">购买</div>
    </header>
    <div class="aui-bar-nav-d"></div>

    <div id="list">
        <dl class="claims-details-1">
            <dt></dt>
            <dd>债权人：</dd>
            <dd>剩余期限：天<span>到期时间：</span></dd>
        </dl>
    </div>
    <div id="list2">
        <div class="claims-details-2">
            <h4>还款情况(已还 期)</h4>
            <ul>
                <li>第1期：还款金额 元<span>已还款</span></li>
                <li>第2期：还款金额 元<span>已还款</span></li>
                <li>第3期：还款金额 元<span>已还款</span></li>
                <li>第4期：还款金额 元<span>已还款</span></li>
                <li>第5期：还款金额 元<span>已还款</span></li>
                <li>第6期：还款金额 元<span>已还款</span></li>
            </ul>
            <div class="claims-details-2-d" id="claims-details-2-d">
                <i class="aui-iconfont aui-icon-down"></i>
            </div>
        </div>
    </div>

    <div class="claims-details-3">
        <img src="image/claims-details-3.jpg" alt=""> 转让价格（元）
        <span id="zhuanrangjiage"></span>
    </div>


    <ul class="claims-details-4">
        <li id="shengyubenjin">剩余本金：</li>
        <li id="yuqishouyi">预期收益：</li>
        <li>本息收益：<span id="benxishouyi"></span></li>
    </ul>

    <!-- <div class="claims-details-d">
        <label><input class="aui-checkbox" type="checkbox" name="" type="checkbox" name="checkbox" id="checkbox_tiaokuan">同意</label>
        <div class="claims-details-d-r">
            <span>《借款协议》</span>
            <span>《委托授权书》</span>
            <span>《风险揭示书》</span>
            <span>《金可贷--电子签名数字证书用户申请确认函》</span>
        </div>
    </div> -->

    <form id="rechargeForm" action="http://www.big-wealth.com/index.php?ctl=hrb&act=creditAssign" method="post">
        <input type="hidden" name="load_id" id="Load_id" value="">
        <input type="hidden" name="is_mobile" value="1">
        <input type="hidden" name="user_id" id="user_id" value="">
    </form>

    <div class="claims-details-btn" tapmode id="weidenglu" onclick="weidenglu();">请登录</div>
    <div class="claims-details-btn" onclick="gesture();" id="kegoumai" style="display: none;">确认购买</div>

    <script type='text/template' id='template'>
        <dl class="claims-details-1">
            <dt>{{=it.transferName}}{{=it.dealSN}}</dt>
            <dd>债权人：{{=it.transferOwner}}**</dd>
            <dd>剩余期限：{{=it.howMuchDay}}天<span>到期时间：{{=it.endDate}}</span></dd>
        </dl>
    </script>

    <script type='text/template' id='template2'>
        <div class="claims-details-2 claims-details-2-2">
            <h4 id="huankuanqingkuang">还款情况(已还 期)</h4>
            <ul>
                {{~it:value:index}}
                <li>第{{=value.periods}}期：还款金额{{=value.pay_money}}元<span>已还款</span></li>
                {{~}}
            </ul>
            <div class="claims-details-2-d" id="claims-details-2-d-2">
                <i class="aui-iconfont aui-icon-down"></i>
            </div>
        </div>
    </script>

</body>
<script type="text/javascript">
    function closeWin() {
        api.closeWin({});
    }
    $("#claims-details-2-d").on('click', function() {
        $(".claims-details-2 ul").toggleClass("claims-details-2-h");
    })

    var id = '';
    apiready = function() {
        id = api.pageParam.id;
        load_list(id);
        load_list2(id);
        // alert(id);
    }

    function load_list(id) {
        api.ajax({
            url: webAddress + '/index.php?ctl=deal&act=index_transfer_app&doSign=1&load_id=' + id,
            method: 'get',

        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                updateList(ret);
                $("#zhuanrangjiage").text("￥" + ret.transferMoney);
                $("#shengyubenjin").text("剩余本金：￥" + ret.oddCorpus);
                $("#yuqishouyi").text("预期收益：￥" + ret.prospectiveEarnings);
                $("#benxishouyi").text("￥" + ret.allMoney);

                api.hideProgress();
            }
        });

    }

    function updateList(data) {

        if ($api.getStorage('userid') == null || $api.getStorage('userid') == '') {
            // $('#weikaitong').hide();
            $('#kegoumai').hide();
            $('#weidenglu').show();
        } else {
            $('#kegoumai').show();

        }
        var template = $api.byId('template');
        var dotFn = doT.template(template.innerHTML);
        var html = dotFn(data);
        var list = $api.byId('list');
        $api.html(list, html);

    }

    function load_list2(id) {
        api.ajax({
            url: webAddress + '/index.php?ctl=deal&act=index_transfer_app&doSign=2&load_id=' + id,
            method: 'get',
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                var arr_key = [];
                var arr_value = [];
                for (var key in ret) {
                    arr_key.push(key); //获取key值.
                    arr_value.push(ret[key]); //获取对应的value值.
                }
                var num = arr_key.length;
                for (var i = 0; i < arr_key.length; i++) {
                    arr_value[i]["periods"] = arr_key[i];
                }
                updateList2(arr_value, num);
            } else {
                alert(JSON.stringify(err));
            }
        });

    }

    function updateList2(data, num) {
        // alert(JSON.stringify(data[1]));
        var template = $api.byId('template2');
        var dotFn = doT.template(template.innerHTML);
        var html = dotFn(data);
        var list = $api.byId('list2');
        $api.html(list, html);

        $("#huankuanqingkuang").text("还款情况(已还" + num + "期)");

        $("#claims-details-2-d-2").on('click', function() {
            $(".claims-details-2-2 ul").toggleClass("claims-details-2-h");
        })
    }

    function gesture() {

        // if ($('#checkbox_tiaokuan').is(':checked')) {

            var temp = $api.getStorage('open_gesture');
            if (temp == 'true') {
                api.openWin({
                    name: 'h5unlock',
                    url: './h5unlock.html',
                    pageParam: {
                        name: 'claims_details'
                    }
                });
            } else {
                pay();
            }

        // } else {
        //     alert("请先阅读并同意条款！");
        // }
    }

    function unlock() {
        pay();
    }

    function pay() {
        // if ($('#checkbox_tiaokuan').is(':checked')) {
        // alert(1);
        var userid = $api.getStorage('userid');


        $("#Load_id").val(id);
        $("#user_id").val(userid);

        // 提交表单
        var t = $('#rechargeForm');
        formArray = t.serializeArray();
        // console.log(JSON.stringify( formArray ));
        // return;

        t.submit();
        api.toast({
            msg: '正在前往鄂托克农行存管系统...',
            duration: 2000,
            location: 'middle'
        });

        // } else {
        //     alert("请先阅读并同意条款！");
        // }
    }

    // 未登录
    function weidenglu() {
        // 跳转登录页面
        // api.openFrame({
        //     name: 'login',
        //     url: './login.html',
        //     rect: {
        //         x: 0,
        //         y: 0,
        //         w: 'auto',
        //         h: 'auto'
        //     },
        //     pageParam: {
        //         login: 'licai'
        //     },
        //     bounces: false,
        //     bgColor: 'rgba(0,0,0,0)',
        //     vScrollBarEnabled: true,
        //     hScrollBarEnabled: true
        // });
        api.openWin({
            name: 'login',
            url: './login.html',
            pageParam: {
                login: 'claims_details',
                id: id,
            }
        });
    }
</script>

</html>
